<template>
	<view class="box bg_fff">
		<view class="content">
			<view class="flex3 list van-hairline--bottom" v-for="item in data_list" :key="item.id">
				<image :src="item.avatar" mode="aspectFill"></image>
				<view class="font_31 w_flex1" style="overflow: hidden;">
					<view>{{item.nickname}}</view>
					<view class="detail_m1">{{item.mobile?item.mobile: '暂未绑定手机号'}}</view>
				</view>
				<view class="phone_wrapper flex2">
					<view class="btn2" @click="get_btn(item)">解绑</view>
				</view>
			</view>
		</view>
		<navigator url="./add_user" hover-class="none" class="foot_wrapper bg_fff van-hairline--top flex6 color_ff6a00">
			添加店员
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data_list: []
			}
		},
		onShow() {
			this.getMyStoreClerk();
		},
		methods: {
			getMyStoreClerk() {
				this.$http.get(this.$api.getMyStoreClerk).then(res => {
					this.data_list = res.data;
				})
			},
			// 解绑
			get_btn(e) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认解绑吗？',
					success: function(res) {
						if (res.confirm) {
							self.get_unbundle(e);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			get_unbundle(e) {
				getApp().get_loading();
				this.$http.get(this.$api.cancelStoreClerk, {
					member_id: e.id
				}).then(res => {
					getApp().get_msg('解绑成功');
					this.getMyStoreClerk();
				})
			}
		}
	}
</script>

<style lang="less">
	.box {
		padding-bottom: 114rpx;
		box-sizing: border-box;
	}

	.content {
		margin-bottom: 50rpx;
		padding: 0 23rpx;
	}

	.detail_m1 {
		margin: 12rpx 0 0 0;
	}

	.list {
		padding: 31rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 23rpx;
		}

		.phone_wrapper {
			margin-left: 50rpx;

			.btn2 {
				font-size: 28rpx;
				width: 120rpx;
				height: 60rpx;
			}
		}
	}

	.foot_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		padding: 23rpx 7rpx 50rpx;
		position: fixed;
		box-sizing: border-box;
		box-shadow: 0px -4rpx 12rpx rgba(0, 0, 0, 0.16);
	}
</style>
